<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onUnmounted } from 'vue'

import { clear } from './data'
import { imagePath } from '@/libs/file-utils'

const img_bg = imagePath('quiz/physiognomy/detail/bg.jpg')
const img_title = imagePath('quiz/physiognomy/detail/title.png')
const btn_share = imagePath('quiz/physiognomy/detail/btn-share.png')
const icon_scale = imagePath('quiz/physiognomy/detail/icon-scale.svg')
const icon_reset = imagePath('quiz/physiognomy/detail/icon-reset.svg')
const icon_switch = imagePath('quiz/physiognomy/detail/icon-switch.svg')
const btn_bg = imagePath('quiz/physiognomy/detail/btn-bg.png')

onUnmounted(clear)
</script>

<template>
  <PageWrapper
    name="quiz-physiognomy-detail"
    :pageStyle="{ backgroundImage: img_bg }"
  >
    <div class="title-bar">
      <div
        class="title"
        :style="{ backgroundImage: img_title }"
      ></div>
      <div
        class="share"
        :style="{ backgroundImage: btn_share }"
      ></div>
    </div>

    <div class="camera">
      <div
        class="btn scale"
        :style="{ backgroundImage: icon_scale }"
      ></div>
      <div
        class="btn reset"
        :style="{ backgroundImage: icon_reset }"
      ></div>
      <div class="switch">
        <div class="inner">
          <div
            class="icon"
            :style="{ backgroundImage: icon_switch }"
          ></div>
          手相测试
        </div>
      </div>
      <div class="loading"></div>
    </div>

    <div
      class="shot"
      :style="{ backgroundImage: btn_bg }"
    >重新拍摄</div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.title-bar {
  margin-top: 40rpx;

  box-sizing: border-box;
  padding-left: 34rpx;
  padding-right: 20rpx;

  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    width: 479rpx;
    height: 77rpx;
  }

  .share {
    width: 186rpx;
    height: 88rpx;

    margin-top: 10rpx;
  }
}

.camera {
  position: relative;
  width: 686rpx;
  height: 912rpx;

  margin: 26rpx auto 0;

  border-radius: 36rpx;
  background-color: #fff;

  .btn {
    position: absolute;
    top: 0;

    width: 96rpx;
    height: 96rpx;

    border-radius: 36rpx;
    background-color: rgba(#000, .26);
    background-size: 48rpx 48rpx;
    background-position: center;
    background-repeat: no-repeat;

    &.scale {
      left: 0;
    }

    &.reset {
      right: 0;
    }
  }

  .switch {
    position: absolute;
    left: 12rpx;
    bottom: 236rpx;

    padding: 6rpx 8rpx;

    border-radius: 40rpx;
    background-color: #FEAAF3;

    .inner {
      padding: 14rpx 30rpx;

      border-radius: 40rpx;
      background-color: #F5CCF0;
      box-shadow: 0 0 10rpx 2rpx rgba(255, 89, 233, 0.50) inset;

      display: flex;

      color: #FF5D96;
      font-size: 32rpx;
      line-height: 44rpx;

      .icon {
        width: 44rpx;
        height: 44rpx;

        margin-right: 14rpx;
      }
    }
  }

  .loading {
    position: absolute;
    left: 12rpx;
    bottom: 14rpx;

    width: 662rpx;
    height: 206rpx;

    border-radius: 36rpx;
    background-color: rgba(255, 241, 246, .84);
    box-shadow: 0 0 10rpx 2rpx rgba(151, 0, 98, .21);
    backdrop-filter: blur(10rpx);
  }
}

.shot {
  width: 557rpx;
  height: 131rpx;

  margin: 56rpx auto 0;

  color: #fff;
  font-size: 48rpx;
  line-height: 130rpx;
  text-align: center;
}
</style>